<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.body1{
		width:300px;
		height:300px;
		border-radius: 50%;
		background-color:yellow;
	}
	.face{
		position: absolute;
		top:130px;
		background-color: yellow;
		margin-left: 50px;
		width:200px;
		height:50px;
	}
	.eye{
		position: relative;
		top:80px;
		background-color: yellow;
		margin: auto;
		width:200px;
		height:20px;
	}
	.lefteye{
		width:70px;
		height:25px;
		border-radius: 10px;
		background: white;
		position: relative;
		float: left;
	}
	.righteye{
		width:70px;
		height:25px;
		border-radius: 10px;
		background: white;
		position: relative;
		float: right;
	}
	.ball1{
		width:25px;
		height:25px;
		border-radius: 50%;
		background-color: black;
	    position: relative;
		float:left;
		animation:myfirst1 5s infinite;
	}
	.ball2{
		width:25px;
		height:25px;
		border-radius: 50%;
		background-color: black;
	    position: relative;
		float:right;
		animation:myfirst2 5s infinite;
	}
	.leftface{
		width:50px;
		height:50px;
		border-radius: 50%;
		background: red;
		position: relative;
		float: left;
	}
	.rightface{
		width:50px;
		height:50px;
		border-radius: 50%;
		background: red;
		position: relative;
		float: right;
	}
	.mouth{
		width:200px;
		height:200px;
		border-radius: 50%;
		border-bottom:red solid 6px; 
        position: absolute;
        top:70px;
        left:55px;
        animation:mymouth 5s infinite;
	}
	.leftmao{
		position: absolute;
		width:70px;
		height:70px;
        border-radius: 50%;
        left:30px;
        top:30px;
        border-top:solid red 6px;
        transform:rotate(30deg);
        animation:mylate1 1s infinite;
	}
	.rightmao{
		position: absolute;
		width:70px;
		height:70px;
        border-radius: 50%;
        left:220px;
        top:30px;
        border-top:solid red 6px;
        transform:rotate(-30deg);
        animation:mylate2 1s infinite;
	}
	@keyframes myfirst1
{
	0%   { left:0px; top:0px;}
	50% { left:45px; top:0px;}
	100% { left:0px; top:0px;}
}
@keyframes myfirst2
{
	0%   { left:0px; top:0px;}
	50% { left:-45px; top:0px;}
	100% { left:0px; top:0px;}
}
   @keyframes mymouth
{
	0%   { border-bottom: 6px red;}
	50% {border-bottom: 15px red;}
	100% { border-bottom: 6px red;}
}
   @keyframes mylate1
{
	0%   {transform:rotate(0deg); ;}
	50% { transform:rotate(-15deg);;}
	100% { transform:rotate(0deg);;}
}
     @keyframes mylate2
{
	0%   {transform:rotate(0deg); ;}
	50% { transform:rotate(15deg);;}
	100% { transform:rotate(0deg);;}
}
	</style>
</head>
<body>
	<div class="body1">
	    <div class="leftmao">
	    </div>
	    <div class="rightmao">
	    </div>
	    <div class="eye">
	    <div class="lefteye">
	    <div class="ball1">
	    </div>
		</div>
		<div class="righteye">
		<div class="ball2">
	    </div>
		</div>	
	    </div>
	    <div class="face">
		<div class="leftface">
		</div>
		<div class="rightface">
		</div>
		</div>
		<div class="mouth">
	</div>
	</div>
	
</body>
</html>